#div1{
    width: 20em;
    height: 10em;
    border: black solid 1px;
    background-color: red;
}

/*相对定位*/
#div2{
    width: 20em;
    height: 10em;
    border:lawngreen dashed 1px;
    background-color:black;
    position: relative;
    left: 1em;
    top: 1em;
}

/*绝对定位*/
#div3{
    width: 20em;
    height: 10em;
    border: blueviolet dotted 1px;
    background: blue;
    position: absolute;
    left: 1em;
    top: 1em;
}

.fixed-side{
    width: 20em;
    height: 10em;
    border: brown double 1px;
    background-color: bisque;
    position: fixed;
    left: 30em;
    top: 10em;
}

.one,.two,.three{
    width: 2em;
    height: 30em;
    border:black solid 1px;
    margin-bottom: 1em;
    overflow: hidden;
    /*overflow: scroll;*/
    float: left;
}

.clf{
    clear:both;
}

.four{
    float: left;
    width: 30em;
    height: 2em;
    border: black solid 1px;
    background-color: crimson;
    margin-bottom: 3em;
}